<!DOCTYPE html>
<html lang="en">
<head>
    <title>Events &#8211; jQuery API</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link href="jquery-bubble-popup/jquery.bubblepopup.v2.3.1.css" rel="stylesheet" type="text/css" />
    <link href="jquery-ui/css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.4.4.js"> </script>
    <script src="json2.js"> </script>
    <script src="jquery-bubble-popup/jquery.bubblepopup.v2.3.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
</head>


<body>
<div id="mbox" class="mbox">
    <div id="add_marker" class="button">
        标记
    </div>
    <div id="finish_btn" class="button">
        保存
    </div>
    <div id="view_btn" class="button">
        预览
    </div>
</div>
    <div id="container">
      <img id="img" src="image.jpg" border="0" class="mainimg"/>
    </div>


<div id="dialog-form" title="Create new user">
    <form>
    <fieldset>
        <label for="link">购买链接</label>
        <input type="text" name="link" id="link" value="http://" class="text ui-widget-content ui-corner-all" />
        <label for="title">标题</label>
        <input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
        <label for="tag">标签</label>
        <input type="text" name="tag" id="tag" value="" class="text ui-widget-content ui-corner-all" />

        <dl>
            <dt>常用标签:</dt>
            <dd>
            <span class="tagbtn tagbtn_normal">Unix</span> 
            <span class="tagbtn tagbtn_normal">软件开发</span> 
            </dd>
        </dl>


    </fieldset>
    </form>
</div>

<div id="tooltip-templete" class="tooltip">
    <img src="http://static.flowplayer.org/img/title/eye.png" alt="相关信息" 
        style="float:left;margin:0 15px 20px 0" />
    <table style="margin:0">
        <tr>
            <td class="label">链接</td>
            <td><a href=''> </a></td>
        </tr>
        <tr>
            <td class="label">相关标签</td>
            <td>abc</td>
        </tr>
    </table>
</div>

</body>
</html>

<style type="text/css">
    /*#img{
        cursor:url(./image.jpg),auto;
    }*/

.mainimg{
    max-width:500px;   /* FF IE7 */
    max-height:500px; /* FF IE7 */
    display:block;
}
.button{
    background-color:#005EAC;
    border-color:#B8D4E8 #114680 #114680 #B8D4E8;
    border-style:solid;
    border-width:1px;
    color:#FFFFFF;
    cursor:pointer;
    font-size:14px;
    font-weight:bold;
    height:20px;
    width:200px;
    display:block;
    text-align:center;
    z-index:3;
}
.button_disable{
    background-color:#5E5E5E;
}
#mbox{
    z-index:3;
    /*position:absolute;*/
}
#container{
    border:1px solid #CECECE; 
    position:relative;
    display:block;
}
#container .marker{
   z-index:1;
   background: url(markers.png) 0 -25px;
   display: block;
   position: absolute;
   /*padding: 30px;
   margin: 30px
   */
   width: 23px;
   height: 25px;
   /*top: 5px;
   left:140px;
   */
   border: 0px;
   cursor:pointer;
}


.tagbtn_selected{
    background-color:#EEFFEE;
    border-bottom:1px solid #AAFFAA;
    border-right:1px solid #AAFFAA;
    color:#BBBBBB;
    cursor:normal;
    font-size:12px;
    margin-top:2px;
    padding:3px 3px 2px;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
}
.tagbtn_normal{
    background-color:#EEFFEE;
    border-bottom:1px solid #AAFFAA;
    border-right:1px solid #AAFFAA;
    color:#006600;
    cursor:pointer;
    font-size:12px;
    margin-top:2px;
    padding:3px 3px 2px;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
}

</style>


<style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>

<script>


function log(msg){
    console.log(msg);
};

function getUrlParams(){
    var urlParams = {};
    (function () {
        var e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&;=]+)=?([^&;]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
           urlParams[d(e[1])] = d(e[2]);
    })();
    return urlParams;
}

var pid;
$(function(){
    params = getUrlParams();
    pid = params['pid'];
    $.get('/picinfo.php?pid='+pid, 
        '',  function(data) {
            log(data);
            p = JSON2.parse(data);
            log(p);
            $('#img').attr('src', p.url)
                .load(update_container_size);
            for (i in p.marks){
                log(p.marks[i]);
                draw_marker(p.marks[i]);
            }
        });


});
function update_container_size(){
    $('#container').css({ 
        'height' : $('#img')[0].clientHeight ,
        'width' : $('#img')[0].clientWidth ,
    });
    $('#container').css('overflow','hidden');
}

var add_marker_btn = $("#add_marker");
$(function(){
    add_marker_btn.disable = function(){
        add_marker_btn.unbind('click');
        add_marker_btn.addClass('button_disable');
    };
    add_marker_btn.enable = function(){

        add_marker_btn.removeClass('button_disable');

        add_marker_btn.click(function(){
            add_marker_btn.disable() ;
            create_marker();
        });
    };
    add_marker_btn.enable();

    $("#finish_btn").click(function(){
        markers = get_all_marker();
        log(JSON2.stringify(markers));

        $.ajax({
          type: 'POST',
          url: 'mark.php?pid='+pid,
          data: JSON2.stringify(markers),
          success: function(){alert('ok') },
          dataType: 'json'
        });

    });
});

function marker_click_handler(event, ui){

    //$('#tag').val()
    element = $(event.target);
    $('#link').val(element.attr('link') || 'http://');
    $('#title').val(element.attr('title'));
    $('#tag').val(element.attr('tag'));

    $(".tagbtn").addClass('tagbtn_normal')
    .unbind('click')
    .bind ('click', function(e){
        old = $("#tag").val();
        $("#tag").val(old + " " + e.target.innerHTML);
        $(e.target).removeClass('tagbtn_normal').addClass('tagbtn_selected');
        $(e.target).unbind('click');
    });
    tags = $(".tagbtn");
    already_tag = $("#tag").val();
    for (i=0; i< tags.length; i++){
        t = $(tags[i]);
        if(already_tag.indexOf(tags[i].innerHTML) != -1){
            t.removeClass('tagbtn_normal').addClass('tagbtn_selected');
            t.unbind('click');
        }
    }

    $( "#dialog-form" ).dialog( "option", 'buttons', {
        "OK" : function (){
            $( this ).dialog( "close" );
            link = $('#link').val(); 
            title = $("#title").val(); 
            tag = $("#tag").val()
            $(event.target)
                .attr('link', link)
                .attr('title', title)
                .attr('tag', tag);

            create_popup($(event.target));
        },
        "Close" : function(){
            $( this ).dialog( "close" );
        },

    });
    $( "#dialog-form" ).dialog( "open" );
}


</script>

<script type="text/javascript">

String.format = function(src){
    if (arguments.length == 0) return null;
    var args = Array.prototype.slice.call(arguments, 1);
    return src.replace(/\{(\d+)\}/g, function(m, i){
        return args[i];
    });
};

$(function() {
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        close: function() {
            //allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });
});


function create_popup(element, link, title, tag){
    link = element.attr('link');
    title = element.attr('title');
    tag = element.attr('tag');
    t = String.format('<a href="{0}"> {1} </a> <br/> {2}',
            link, title, tag);

    //$($('#tooltip-templete').innerHTML, 
    //        {id: element.id+'_tooltip'}).appendTo("body");
    //element.tooltip();

    //element.CreateBubblePopup({
    //        //width : '100px',
    //        //position: 'right',
    //        //align: 'top',
    //        innerHtml: t,
    //        innerHtmlStyle: { color:'#000000', 'text-align':'center' },
    //        themeName: 'blue',
    //        themePath: 'jquery-bubble-popup/jquerybubblepopup-theme',
    //        selectable: true,
    //        distance : '30px',
    //        tail : {
    //            align:'center',
    //            hidden: false
    //        }
    //  });
}
</script>
<script>

function draw_marker(info){
    cnt = $('.marker').length ;
    marker_id = 'marker' + cnt 
    marker_logo_y = cnt * -25;

    var new_marker = $('<span></span>', {id: marker_id})
        .addClass('marker')
        .attr('link', info.link)
        .attr('title', info.title)
        .attr('tag', info.tag)
        .css('background-position', '0px '+ marker_logo_y +'px')
        .css('left', info.x)
        .css('top', info.y)
        .appendTo("#container");
    create_popup(new_marker);
}
function create_marker(){
    cnt = $('.marker').length ;
    marker_id = 'marker' + cnt 
    marker_logo_y = cnt * -25;

    var new_marker = $('<span></span>', {id: marker_id})
        .addClass('marker')
        .css({'background-position': '0px '+ marker_logo_y +'px' ,
            "display": "none"
        })
        .attr('marked', 0)
        .appendTo("#container");

    $("#container").css({'cursor':'url(./us_cursor.gif)'});
    $("#container").bind('mousemove', function(e){
            if ($(e.target).hasClass('marker') )
                return;
            var xx=e.originalEvent.layerX || e.originalEvent.x||0;
            var yy=e.originalEvent.layerY||e.originalEvent.y||0;
            if (xx-12 < 0)
                return;
            if(yy-30 < 0)
                return;

            new_marker.css({'top': yy-30+'px' })
                .css({'left': xx-12+'px' })
            new_marker.css({'display': 'block'});
        })

    $("#container").click(function(e){
            if ($(e.target).hasClass('marker') )
                return;

            add_marker_btn.enable();
            $("#container").unbind("mousemove");
            $("#container").unbind("click");
            new_marker.bind("click", marker_click_handler);
            new_marker.click(); //trigger event
            new_marker.attr('marked', 1);

            var xx=e.originalEvent.layerX || e.originalEvent.x||0;
            var yy=e.originalEvent.layerY||e.originalEvent.y||0;
            //log(xx+":" + yy);
            new_marker.css({'top': yy-30+'px' })
                .css({'left': xx-12+'px' })

        })


    $( ".marker" ).draggable({
        opacity: 0.35 ,
        containment: 'parent',

        start: function(event, ui) {
            ui.helper.unbind("click", marker_click_handler);
        },
        stop: function(event, ui) {
            setTimeout(function(){
                ui.helper.bind("click", marker_click_handler);
            }, 300);
        }
    });
}

//得到最后需要post的list
function get_all_marker(){
    markers = $('.marker');
    var list = new Array();
    for(i=0;i<markers.length;i++){
        mm = $(markers[i]);
        var o = {
            'link': mm.attr('link'),
            'title': mm.attr('title'),
            'tag': mm.attr('tag'),
            'y': mm.css('top'),
            'x': mm.css('left'),
        }
        list.push(o);
    }
    return list;
}
</script>
